import { createApp } from 'vue'
import { createPinia } from 'pinia'
// 初始化系统样式
import './style/index.scss'
import ElementPlus from 'element-plus'
import VMdPreview from '@kangc/v-md-editor/lib/preview'
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index'
import VueMarkdownEditor from '@kangc/v-md-editor'
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
import Prism from 'prismjs'
import hljs from 'highlight.js'
import App from './App.vue'
import 'normalize.css'

// 挂载路由配置
import router from './router/index'
// 挂载 Element Plus
import 'element-plus/dist/index.css'
// 隐藏元素
import 'element-plus/theme-chalk/display.css'
// 注册所有图标
import 'virtual:svg-icons-register' // 引入注册脚本
// import SvgIcon from '@/components/SvgIcon/ArticleCardList.vue'
import elementIcons from '@/components/SvgIcon/svgicon'
// v-md-editor
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css'
import '@kangc/v-md-editor/lib/style/base-editor.css'
import '@kangc/v-md-editor/lib/theme/style/vuepress.css'

import 'highlight.js/styles/atom-one-dark-reasonable.css' // 样式
// 组件注册
import Danmaku from 'danmaku-vue'

const app = createApp(App)

// 创建v-highlight全局指令
app.directive('highlight', function (el) {
  const blocks = el.querySelectorAll('pre code')
  blocks.forEach((block: HTMLElement) => {
    hljs.highlightBlock(block)
  })
})

app.use(router)
app.use(createPinia())
app.use(ElementPlus)
// 组件
app.component('Danmaku', Danmaku)
app.use(elementIcons)
VueMarkdownEditor.use(vuepressTheme, {
  Prism
})
app.use(VueMarkdownEditor)

VMdPreview.use(vuepressTheme, {
  Prism
})
VMdPreview.use(createCopyCodePlugin())
app.use(VMdPreview)

app.mount('#app')
